<template>
  <div class="content">
    <div class="handles">
      <Button type="primary" @click="adjustHeader">调整表头排序</Button>
      <Button type="primary" @click="addPackage">新增外呼套餐</Button>
      <Button type="primary" @click="buyRecord">购买记录</Button>
      <Button type="primary" @click="callRecord">所有通话记录</Button>
      <Button type="primary" @click="exportData"
        v-if="unlocking('0213020501')">导出Excel</Button>

    </div>
    <dynamic-header ref="dynamicHeader" @fieldCancel="fieldCancel" @headUpdate="headUpdate"
      :sourcedata="sourcedata" :targetdata="targetdata"></dynamic-header>

    <dt-grid ref="table" :columns="columns" :page='page' :onFetch='onFetch' />
    <dt-audio ref="dtAudio" />
    <add-call-sign ref="addCallSign" @dataRefresh='dataRefresh'></add-call-sign>
    <dynamic ref="dynamic"></dynamic>
    <end-call ref="endCall" @dataRefresh='dataRefresh'></end-call>
  </div>
</template>

<script>
  import dynamicHeader from '@/components/dynamicHeader.vue'
  import columnOpt from './opt/externalCallSignColumn'
  import businessCommonMgr from '@/biz/businessReport/businessCommon'
  import toolApi from "@/biz/base/tool";
  import receiverMgr from '@/biz/receiver/receiver'
  import addCallSign from './components/addCallSign.vue'
  import dynamic from './components/dynamic.vue'
  import endCall from './components/endCallSign.vue'
  export default {
    components: {
      dynamicHeader,
      addCallSign,
      dynamic,
      endCall
    },
    data() {
      return {
        columns: [],
        sourcedata: [],
        targetdata: [],
        page: {
          current: 1,
          total: 0
        },
        formValidate: {
          companyIds: [],
          buildingId: '',
          checkTime: []
        },
        srcAudio: '',
        getListParams: {}
        // 承接


      }
    },
    mounted() {

      this.getColumns()

      this.$refs.table.init(this, new columnOpt(this))

    },
    methods: {
      dataRefresh() {
        this.$refs.table.fetch()
      },

      // go通话记录
      callRecord(val) {
        console.log(val, 'vvv');
        if (val && val.userId) {
          this.$router.push({
            path: '/clueManage/externalCallSignMar/externalCallSignCallRecord',
            query: {
              type: 'LEASE',
              userId: val.userId,
            },
          })
        } else {
          this.$router.push({
            path: '/clueManage/externalCallSignMar/externalCallSignCallRecord',
            query: {
              type: 'LEASE',
            },
          })
        }
      },
      dynamic(val) {
        console.log(val, 'sssss');
        this.$refs.dynamic.show(val)
      },
      editPackage(val) {
        this.$refs.addCallSign.show('edit', val)

      },
      addPackage() {
        this.$refs.addCallSign.show('add')
      },
      endCallSign(val) {
        this.$refs.endCall.show(val)
      },
      buyRecord(val) {
        console.log(val, 'aaaaaa');
        this.$router.push({
          path: '/clueManage/externalCallSignMar/buyRecord',
          query: {
            userId: val.userId
          }
        })
      },
      audioPlay(val) {
        if (val.recordUrl) {
          this.$refs.dtAudio.show(val.recordUrl)
        }

      },
      audioDownload(val) {
        if (val.recordUrl) {
          toolApi.downloadFile(val.recordUrl, '音频', '',
            'audio/mpeg;audio/ogg;audio/aac;audio/wav;audio/webm', 'noHomologous');
        }

      },
      exportData() {
        receiverMgr.exportPrivacyNumUseList(this.getListParams)
      },
      adjustHeader() {
        this.$refs.dynamicHeader.show()
      },
      // 列表数据
      onFetch(data) {
        this.getListParams = data
        return receiverMgr.getPrivacyNumUseList(this.getListParams).then(res => {

          this.page.total = res.total
          return res.list
        })
      },

      // 获取表头
      getColumns() {
        businessCommonMgr
          .reportHeadList({
            headType: 10009
          })
          .then((res) => {
            this.sourcedata = res.hideHead
            this.targetdata = res.showHead
            this.targetdata.forEach((item, index) => {
              item.disabled = item.fixed
            })
            this.columns = []
            let baseColumns = new columnOpt(this).options()
            this.targetdata.forEach(item => {
              let column = baseColumns.filter(baseItem => item.fieldKey == baseItem
                .field
              )
              if (column.length) {
                column[0].field = item.fieldKey
                this.columns.push(column[0])
              }
            })
            this.columns.push(baseColumns[baseColumns.length - 1])
            setTimeout(() => {
              this.$refs.table.fetch()

            }, 1000)
          })
          .catch((err) => {

          })
      },
      // 更新表头
      headUpdate(params) {
        businessCommonMgr
          .reportHeadUpdate({
            headType: 10009,
            updateHead: params.updateInfo
          })
          .then((res) => {
            this.getColumns()
            this.$refs.dynamicHeader.hide()
          })
          .catch((err) => {

          })
      },


      fieldCancel() {
        this.$refs.dynamicHeader.hide()
      },


    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;

    .topRecord {
      display: flex;
      flex-direction: row;

      .record1 {
        display: flex;
        flex-direction: row;
        cursor: pointer;

        p {
          text-align: center;
          padding: 0 20px;

          span {
            display: block;
            font-size: 20px;
            font-weight: bold;
            color: #000;
          }

          em {
            display: block;
            font-style: normal;
          }
        }

        p:nth-child(2n) {
          border-right: 1px #ccc solid;
        }

        p.curr2 {
          span {
            color: red;
            font-weight: bold;
          }
        }

        p.curr {
          span {
            color: #2d8cf0;
            font-weight: bold;
          }
        }


      }

      .recordBtn {
        padding-left: 20px;


        p {
          span {
            color: #2db7f5
          }
        }

      }
    }

    .retainClass {
      margin-top: 20px;
    }
  }

  .handles {
    display: flex;

    align-items: center;
    margin-bottom: 10px;
    flex-direction: row-reverse;

    >* {
      margin-left: 10px;

    }
  }

  .footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }


  // 承接人
  .tips {
    background: rgba(254, 252, 236, 1);
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;

    span {
      color: #2d8cf0;
      margin-right: 20px;
    }

  }
</style>